<template>
  <div>
    <ul>
      <li :style="{opacity}">欢迎学习Vue</li>
      <li>news001 <input type="text"></li>
      <li>news002 <input type="text"></li>
      <li>news003 <input type="text"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "News",
  description: '',
  mixins: [],
  components: {},
  props: {},
  data() {
    return {
      opacity:1
    }
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
  },
  /*mounted() {
   this.timer= setInterval(()=>{
      this.opacity-=0.01
      if(this.opacity<=0) this.opacity=1
    },16)
  },*/
  destroyed() {
  },
  /*beforeDestroy() {
    console.log('News组件被销毁了')
    clearInterval(this.timer)
  },*/
  // 路由钩子，激活
  activated() {
    this.timer= setInterval(()=>{
      this.opacity-=0.01
      if(this.opacity<=0) this.opacity=1
    },16)
  },
  // 路由钩子，失活
  deactivated() {
    console.log('News组件被销毁了')
    clearInterval(this.timer)
  },
  methods: {}
}
</script>

<style scoped>

</style>